<template>
  <div class="essentialInf">
      <el-form :rules="rulesRule" :model="formList" ref="FormListOne" id="FormListOne" label-width="100px">
          <el-form-item label="字典名称:" prop="name">
              <el-input v-model="formList.name" placeholder="请输入字典名称"></el-input>
          </el-form-item>
          <el-form-item label="字典描述:" prop="desc">
              <el-input v-model="formList.desc" placeholder="请输入字典描述"></el-input>
          </el-form-item>
          <el-form-item label="字典表信息:">
              <el-button type="primary" @click="addItem">新增</el-button>
          </el-form-item>
          <el-table
              :data="formList.zidianList"
              :border="true"
              :highlight-current-row="true"
              :header-cell-style="{ padding: '5px', 'background-color': '#F9F9F9', 'font-weight': '500' }"
          >
              <el-table-column align="center" prop="name" label="字段名">
                  <template #default="scope">
                      <el-input v-model="scope.row.name"></el-input>
                  </template>
              </el-table-column>
              <el-table-column align="center" prop="type" label="字段类型">
                  <template #default="scope">
                      <el-input v-model="scope.row.type"></el-input>
                  </template>
              </el-table-column>
              <el-table-column align="center" prop="des" label="字段描述">
                  <template #default="scope">
                      <el-input v-model="scope.row.des"></el-input>
                  </template>
              </el-table-column>

              <el-table-column align="center" prop="topList" label="上级表">
                  <template #default="scope">
                      <el-select
                          class="select-item"
                          v-for="(item, index) in scope.row.topList"
                          v-model="item.topSurface"
                          :key="index"
                          placeholder="Select"
                          @change="topSurfaceChange($event, scope, index)"
                      >
                          <el-option
                              v-for="itemop in topOptions"
                              :disabled="renderDisabled(scope, itemop)"
                              :key="itemop"
                              :label="itemop"
                              :value="itemop"
                          />
                      </el-select>
                  </template>
              </el-table-column>

              <el-table-column align="center" prop="topList" label="上级字段">
                  <template #default="scope">
                      <el-select
                          class="select-item"
                          v-for="(item, index) in scope.row.topList"
                          v-model="item.superiorField"
                          :key="index"
                          placeholder="Select"
                          :loading="selectLoading"
                          loading-text="加载中..."
                          @visible-change="getTopFieldList(scope, index)"
                      >
                          <el-option v-for="itemop in item.superiorFieldOpation || []" :key="itemop" :label="itemop" :value="itemop" />
                      </el-select>
                  </template>
              </el-table-column>

              <el-table-column align="center" label="操作" width="100px">
                  <template #default="scope">
                      <div class="caozuo-btn" v-for="(item, index) in scope.row.topList" :key="index">
                          <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope, index)" />
                          <el-button
                              v-if="index == scope.row.topList.length - 1"
                              type="primary"
                              :icon="Plus"
                              circle
                              @click="handleAddItem(scope)"
                          />
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-form>
      <!-- <div class="footer">
          <el-button type="primary" @click="handlestep(-1)">上一步</el-button>
          <el-button type="primary" @click="handlestep(1)">下一步</el-button>
      </div> -->
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
const emit = defineEmits(['changeStep'])
const props = defineProps({
  formData: {
      type: Object,
      default: () => {},
  },
})

const selectLoading = ref(false) //select下拉loading

//当前基本信息
const formList = ref({
  name: '', //字典名
  desc: '', //字典描述
  zidianList: [
      {
          id: 'asa', //字段id
          name: 'sd', //字段名
          type: 'int', //字段类型
          des: 'sdsd', //字段米哦啊书

          topList: [
              {
                  topSurface: 's',
                  superiorField: '2',
                  superiorFieldOpation: [], //对应上级表的字段表
              },
              {
                  topSurface: 's',
                  superiorField: '',
                  superiorFieldOpation: [], //对应上级表的字段表
              },
              {
                  topSurface: 's',
                  superiorField: '2',
                  superiorFieldOpation: [], //对应上级表的字段表
              },
              {
                  topSurface: 's',
                  superiorField: '',
                  superiorFieldOpation: [], //对应上级表的字段表
              },
          ], //上级表的
      },
  ], //字典表信息
})

const topOptions = ref([]) //上级表列表

//返回是否禁用
const renderDisabled = (scope, listdata) => {
  let list = []
  formList.value.zidianList[scope.$index].topList.forEach((item, index) => {
      list.push(item.topSurface)
  })

  if (list.includes(listdata)) {
      return true
  } else {
      return false
  }
}

//上级表改变联动上级字段
const topSurfaceChange = (e, scope, index) => {
  //选择的id,表格所在行数据，选择的上级表index
  //清空上级字段以及其下拉
  formList.value.zidianList[scope.$index].topList[index].superiorField = ''
  formList.value.zidianList[scope.$index].topList[index].superiorFieldOpation = []
}

//上级字段
const getTopFieldList = (scope, index) => {
  //表格所在行，上级字段所在位置
  console.log(scope, index)
  selectLoading.value = true
  getSuperiorFieldOpation(scope.$index, index)
}

//获取相应上级字段下拉信息
const getSuperiorFieldOpation = (findex, index) => {
  //拿到上级表id
  let topid = formList.value.zidianList[findex].topList[index].topSurface
  if (topid) {
      //调接口
      let data = [1, 3, 8, 5, 7]
      formList.value.zidianList[findex].topList[index].superiorFieldOpation = data
      selectLoading.value = false
  }
}

//新增字典表信息
const addItem = () => {
  formList.value.zidianList.push({
      id: '',
      name: '',
      type: '',
      des: '',
      topList: [
          {
              topSurface: '',
              superiorField: '',
              superiorFieldOpation: [], //对应上级表的字段表
          },
      ], //上级表的
  })
}

//删除字典表信息
const handleDelete = (scope, index) => {
  //删除上级表
  let list = JSON.parse(JSON.stringify(formList.value.zidianList))
  //删除表格行
  if (list[scope.$index].topList.length > 1) {
      list[scope.$index].topList.splice(index, 1)
      formList.value.zidianList = list
  }else{
      list.splice(scope.$index,1)
      formList.value.zidianList = list
  }
}

//新增上级表对应字段
const handleAddItem = (scope) => {
  formList.value.zidianList[scope.$index].topList.push({
      topSurface: '',
      superiorField: '',
      superiorFieldOpation: [], //对应上级表的字段表
  })
}

//切换步骤
const handlestep = (step) => {
  emit('changeStep', step)
}

onMounted(() => {
  //获取上级表列表
  topOptions.value = [1, 2, 4, 5, 6, 7]
})

watch(props, () => {
  if (props.id) {
      formList.value = props.formData
      formList.value.zidianList.forEach((item, index) => {
          item.topSurface && getSuperiorFieldOpation(item.topSurface, index)
      })
  }
})
</script>
<style scoped lang="scss">
.essentialInf {
  margin-top: 30px;
  text-align: center;
  .caozuo-btn,
  .select-item {
      display: flex;
      margin-top: 10px;
      &:first-child {
          margin-top: 0;
      }
  }

  .footer {
      position: absolute;
      bottom: 30px;
      left: 45%;
  }
}
</style>
